import React from 'react';

import { ISvgLock } from '../mockupPage.types';
export const SvgLock: React.FC<ISvgLock> = ({ color }) => (
  <div
    style={{
      width: '32px',
      height: '32px',
      display: 'flex',
      justifyContent: 'center',
      alignItems: 'center',
      position: 'absolute',
      top: '16px',
      right: '16px',
      background: 'rgba(34, 32, 33, 0.5)',
      borderRadius: '12px'
    }}>
    <svg
      width="16"
      height="20"
      viewBox="0 0 16 20"
      fill="none"
      xmlns="http://www.w3.org/2000/svg">
      <path
        d="M14.07 8H13V5C13 5 13 0 8 0C3 0 3 5 3 5V8H1.93C1.41813 8 0.927229 8.20334 0.565284 8.56528C0.203339 8.92723 0 9.41813 0 9.93V18.08C0.00264321 18.5901 0.207148 19.0785 0.568807 19.4383C0.930466 19.798 1.41986 20 1.93 20H14.07C14.5819 20 15.0728 19.7967 15.4347 19.4347C15.7967 19.0728 16 18.5819 16 18.07V9.93C16 9.41813 15.7967 8.92723 15.4347 8.56528C15.0728 8.20334 14.5819 8 14.07 8V8ZM8 16C7.60444 16 7.21776 15.8827 6.88886 15.6629C6.55996 15.4432 6.30362 15.1308 6.15224 14.7654C6.00087 14.3999 5.96126 13.9978 6.03843 13.6098C6.1156 13.2219 6.30608 12.8655 6.58579 12.5858C6.86549 12.3061 7.22186 12.1156 7.60982 12.0384C7.99778 11.9613 8.39991 12.0009 8.76537 12.1522C9.13082 12.3036 9.44318 12.56 9.66294 12.8889C9.8827 13.2178 10 13.6044 10 14C10 14.5304 9.78929 15.0391 9.41421 15.4142C9.03914 15.7893 8.53043 16 8 16ZM11 8H5V5.5C5 4 5 2 8 2C11 2 11 4 11 5.5V8Z"
        fill={color}
      />
    </svg>
  </div>
);
